<template>
  <div class="otherSetting">
    <el-form class="m7-form" size="mini" :model="otherSetting"
      ref="otherSetting" label-position="top">
      <el-form-item size="mini">
        <span slot="label">
          访客阅读消息状态提示
          <el-switch
            style="marginLeft: 5px"
            v-model="otherSetting.isVisitorReadMessage">
          </el-switch>
        </span>
        <p>开启后，座席可在对话界面查看访客接收的消息是否已读（仅支持网站、SDK等渠道）</p>
      </el-form-item>
      <el-form-item size="mini" class="line">
        <span slot="label">
          座席阅读消息状态提示
          <el-switch
            style="marginLeft: 5px"
            v-model="otherSetting.isAgentReadMessage">
          </el-switch>
        </span>
        <p>开启后，访客可以在对话界面查看自己发送的消息，企业客服人员是否已读（仅支持网站、SDK等渠道）</p>
      </el-form-item>
      <el-form-item size="mini" class="line">
        <span slot="label">
          访客输入消息预知
          <el-switch
            style="marginLeft: 5px"
            v-model="otherSetting.isVisitorTypeNotice">
          </el-switch>
        </span>
        <p>开启后，座席可在工作台查看访客正在输入的内容（仅支持sdk、pc、wap、微信公众号、微信小程序渠道）</p>
      </el-form-item>
      <el-form-item size="mini" class="line">
        <span slot="label">
          座席输入消息预知
          <el-switch
            style="marginLeft: 5px"
            v-model="otherSetting.isAgentTypeNotice">
          </el-switch>
        </span>
        <p>开启后，访客可在工作台查看访客正在输入的内容（仅支持sdk、pc、wap、微信公众号、微信小程序渠道）</p>
      </el-form-item>
      <el-form-item size="mini" class="line">
        <span slot="label">
          超时回复预警
          <el-switch
            style="marginLeft: 5px"
            v-model="otherSetting.isTimeoutReplyAlert">
          </el-switch>
        </span>
        <p style="marginLeft:0px;display:inline">开启后，会话列表访客等待时间</p>
        <el-input-number style="width:80px;margin:0px 5px" class="ipt" v-model="otherSetting.timeoutReplyAlertTime"
          :controls="false" :min="0" :max="600" :step="1" size="small">
        </el-input-number>
        <p style="display:inline">秒的会话显示超时预警，并且触发浏览器提醒</p>
      </el-form-item>
      <el-form-item size="mini" label="座席退出系统确认">
        <el-checkbox v-model="otherSetting.isSystemExit">有未关闭会话不允许退出</el-checkbox>
      </el-form-item>
    </el-form>
    <div class="btn fr">
      <el-button type="primary" size="mini" @click="saveFun">保存</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { BasicModule } from '@/store/modules/config/basic'
@Component({
  name: 'otherSetting'
})
export default class OtherSetting extends Vue {
  private $message: any
  private otherSetting = {
    isVisitorReadMessage: false,
    isAgentReadMessage: false,
    isVisitorTypeNotice: false,
    isAgentTypeNotice: false,
    isSystemExit: false,
    isTimeoutReplyAlert: false,
    timeoutReplyAlertTime: 60
  }

  private saveFun () {
    if (this.otherSetting.isTimeoutReplyAlert && this.otherSetting.timeoutReplyAlertTime === undefined) {
      this.$message.error('请输入超时回复预警等待时间')
      return
    }
    const {
      isVisitorReadMessage,
      isAgentReadMessage,
      isVisitorTypeNotice,
      isAgentTypeNotice,
      isSystemExit,
      isTimeoutReplyAlert,
      timeoutReplyAlertTime
    } = this.otherSetting
    const actionData = {
      url: '/im-center/action/config/globalSetting/update',
      method: 'POST',
      data: {
        isVisitorReadMessage,
        isAgentReadMessage,
        isVisitorTypeNotice,
        isAgentTypeNotice,
        isSystemExit,
        isTimeoutReplyAlert,
        timeoutReplyAlertTime
      }
    }
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.$message.success('保存成功')
      }
    })
  }

  private mounted () {
    const actionData = { url: '/im-center/action/config/globalSetting/get', method: 'POST', data: {} }
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success && res.data) {
        const {
          isVisitorReadMessage,
          isAgentReadMessage,
          isVisitorTypeNotice,
          isAgentTypeNotice,
          isSystemExit,
          isTimeoutReplyAlert,
          timeoutReplyAlertTime
        } = res.data
        this.otherSetting = {
          isVisitorReadMessage: isVisitorReadMessage || false,
          isAgentReadMessage: isAgentReadMessage || false,
          isVisitorTypeNotice: isVisitorTypeNotice || false,
          isAgentTypeNotice: isAgentTypeNotice || false,
          isSystemExit: isSystemExit || false,
          isTimeoutReplyAlert: isTimeoutReplyAlert || false,
          timeoutReplyAlertTime: timeoutReplyAlertTime || 60
        }
      } else {
        this.otherSetting = {
          isVisitorReadMessage: false,
          isAgentReadMessage: false,
          isVisitorTypeNotice: false,
          isAgentTypeNotice: false,
          isSystemExit: false,
          isTimeoutReplyAlert: false,
          timeoutReplyAlertTime: 60
        }
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
  .otherSetting
    padding 24px
    border-radius 10px
    height calc(100% - 40px)
    overflow auto
    box-sizing border-box
    margin 0 2px 2px 0
    border 1px solid #ecf0f3
    box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    p
      color #767E91
      font-size 12px
    .line
      border-bottom 1px solid $border-main
      padding-bottom 24px
</style>
<style lang="stylus">
  .otherSetting
    .el-radio
      display block
      margin 10px 0px
</style>
